<template>
	<view class="MainBox">
		<view class="seekHelp" @click="seekHelp" style="background-image: url(/static/images/anniuelderly.png);" >
			<image class="helpIcon" src="/static/images/oldUser/helpIcon.png"></image>
		</view>
		<view class="title">我需要帮助，一键拨打电话</view>
	</view>
	<view class="BackGround" style="background-image: url(/static/images/bg3.jpg);"></view>
	<view class="bottom-nav">
	  <navigator url="pages/elderlyInterface/elderly" class="nav-item active">
	    <image src="/static/images/regularUser/home-s.png" class="nav-icon"></image>
	    <text>首页</text>
	  </navigator>
	  <navigator url="/pages/elderlyInterface/elderlyHomepage" class="nav-item">
	    <image src="/static/images/regularUser/my.png" class="nav-icon"></image>
	    <text>我的</text>
	  </navigator>
	</view>
</template>

<script>
	import TabBar from '@/pages/elderlyInterface/TabBar.vue';
	export default{
		methods:{
			gotoseekHelp() { uni.navigateTo({ url: '' }); }
		}
	}
</script>

<style>
	.MainBox{
		height: 100vh;
		display:flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding-bottom: 80px;
		flex-direction: column;
	}
	.seekHelp {
		width: 80%;
		height: 400px;
		font-size: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat; 
	}
	.BackGround{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		z-index: -1;
		object-fit: cover;
	}
	.helpIcon{
		width:30vw;
		height:18vh;
	}
	.title{
		font-size: 23px;
		font-weight: 800;
		color: #E6615E;
		letter-spacing: 4px;
	}
	
	.bottom-nav {
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  height: 80px;
	  background-color: white;
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  color: black;
	  padding: 0 20px;
	}
	
	.nav-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  font-size: 14px;
	}
	
	.nav-item.active {
	  color: #f57f17;
	}
	
	.nav-icon {
	  width: 24px;
	  height: 24px;
	  margin-bottom: 5px;
	}
</style>